<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <?php
        $location = $_GET['location'];
        $dir_root = dirname(__FILE__) . '/media/upload/editor/e_'.$location;
        if(!file_exists($dir_root)){
            mkdir($dir_root, 0777);
        }
        $files1 = scandir($dir_root, 1);
        
        //get url
        $s = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : "";
        $sp = strtolower($_SERVER["SERVER_PROTOCOL"]);
        $protocol = substr($sp, 0, strpos($sp, "/")) . $s;
        $port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":" . $_SERVER["SERVER_PORT"]);
        $protocol = $protocol . "://" . $_SERVER['SERVER_NAME'] . $port;
        $a_url = explode("/", $_SERVER['REQUEST_URI']);
        $path = "";
        $id = $_GET['id'];

        for ($j = 0; $j < count($a_url) - 1; $j++) {
            $path .= $a_url[$j] . "/";
        }
        $protocol = '/media/media/upload/editor/e_'.$location."/";
        $path = "";
        ?>
        <script type="text/javascript" src="<?= $path . 'library/themes/js/jquery.min.js' ?>"></script>
        <link rel="stylesheet" href="<?= $path . 'library/themes/css/upload.css' ?>" type="text/css" media="all" />
        <link rel="stylesheet" href="<?= $path . 'library/themes/css/style.css' ?>" type="text/css" media="all" />
        <script type="text/javascript" src="<?= $path . 'library/themes/js/ajaxupload.js' ?>"></script>
        <script type="text/javascript" src="<?= $path . 'library/themes/js/script.js' ?>"></script>
        <script type="text/javascript" src="<?= $path . 'library/themes/js/callback.js' ?>"></script>
    
    </head>
    <body style="height: 300px;margin-top: 0px;">
        <div id="imageEditoter">
            <div class="widget-title">
                <ul class="nav nav-tabs" style="margin-bottom: 0px;">
                    <li class="active cmdlist"><a class="" href="#tab1" data-toggle="tab">List</a></li>
                    <li class="cmdupload"><a class="" href="#tab2" data-toggle="tab">Upload</a></li>
                </ul>
            </div>
            <div style="border-left: 1px solid #CDCDCD;
                 border-right: 1px solid #CDCDCD;border-bottom: 1px solid #CDCDCD;padding-top: 15px;">
                <div class="list row-fluid" style="height: 370px;overflow-y:auto;">
                    <ul class="thumbnails" id="imagelist" >
                        <?php
                        for ($i = 0; $i < count($files1) - 2; $i++) {
                            $d = explode('.', $files1[$i]);
                            if(!in_array(end($d), array('jpg','png'))){
                                continue;
                            }
                            ?>
                            <li class="span2" item='<?= $files1[$i] ?>'>
                                <a class="thumbnail cmdchosen" chosen="0" href="#">
                                    <img style="width: 100px;height: 100px;" src="<?= $protocol . $files1[$i] ?>" />
                                </a>
                                <div class="actions">
                                    <a href="javascript:;" itemid="-1" onclick="jQuery('#hiddenfile').val('<?= $files1[$i] ?>');" class="removeimage" title="">
                                        <i style="color: white;" class="">Delete</i>
                                    </a>
                                </div>
                            </li>
                        <?php } ?>
                    </ul>
                </div>
                <div class="upload" style="display: none;height: 370px;overflow-y:auto;">
                    <div style="padding-left: 10px;padding-top: 10px;" id="uploadfile"></div>
                </div>
            </div>
            <div style="bottom: 0px;position: absolute;padding-left: 20px;">
                <table>
                    <tr>
                        <td style="width: 100px;padding-top: 5px;" valign="top" align="center">
                            Width:
                        </td>
                        <td valign="middle">
                            <input type="text" class="width" />
                        </td>
                        <td style="width: 100px;padding-top: 5px;" valign="top" align="center">
                            Height:
                        </td>
                        <td valign="middle">
                            <input type="text" class="height" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <script>
            /*function add_image(msg) {
                XD.postMessage(msg, "<?php echo urldecode($_REQUEST['r']) ?>", parent);
                return false;
            }*/
            var url_base = '<?= $path ?>';
            var id = '#imageEditoter';
            jQuery(id + " .cmdlist").click(function() {
                jQuery(id + " .list").show();
                jQuery(id + " .upload").hide();
                jQuery(this).addClass('active');
                jQuery(id + " .cmdupload").removeClass('active');
            });
            jQuery(id + " .cmdupload").click(function() {
                jQuery(id + " .list").hide();
                jQuery(id + " .upload").show();
                jQuery(this).addClass('active');
                jQuery(id + " .cmdlist").removeClass('active');
            });
            function buildEvent() {
                jQuery(".cmdchosen").unbind("click");
                jQuery(".cmdchosen").click(function() {
                    if (jQuery(this).attr('chosen') == 0) {
                        jQuery(this).css("background-color", 'pink');
                        jQuery(this).attr('chosen', 1);
                        var img = jQuery(this).find('img').attr("src");
                        //add_image('[{"height":"'+jQuery('.height').val()+'","width":"'+jQuery('.width').val()+'","img":"'+img+'"}]');
                    } else {
                        jQuery(this).css("background-color", '');
                        jQuery(this).attr('chosen', 0);
                        //add_image('[{"height":"'+jQuery('.height').val()+'","width":"'+jQuery('.width').val()+'","img":""}]');
                    }
                });
                callpopup();
            }
            buildEvent();

            $('#uploadfile').ajaxupload({
                url: 'upload_file.php',
                remotePath: 'media/upload/editor/e_<?= $location ?>',
                maxFiles: 100,
                autoStart: true,
                data: 'path=0',
                bootstrap: true,
                allowExt: ['png', 'jpg'],
                maxFileSize: "10M",
                removeOnSuccess: true,
                success: function(name) {
                    jQuery("#imagelist").append('<li class="span2">\
                            <a class="thumbnail cmdchosen" chosen="0" href="#">\
                                <img style="width: 100px;height: 100px;" src="<?= $protocol ?>' + name + '" />\
                            </a>\
                            <div class="actions">\
                                <a href="javascript:;" itemid="-1" itemname="test_nahi_51cd32eced28d_fruit.png" class="removeimage" title="">\
                                    <i style="color: white;" class="">Delete</i>\
                                </a>\
                            </div>\
                        </li>');
                    buildEvent();
                    //jQuery(id + " .cmdlist").click();
                },
                error: function(txt, fileName) {
                },
                onInit: function(au)
                {
                    //hide remove files and upload button
                    au.removeFiles.hide();
                    au.uploadFiles.hide();
                    jQuery(".ax-legend").hide();
                }

            });
        </script>
        <input type="hidden" id="hiddenfile" />
        <div id="toPopup"> 
            <div class="closepopup"></div>
            <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
            <div id="popup_content"> <!--your content start-->
                <p> Are you sure to delete this file?</p>
                <p style="float: right;">
                    <input class="btn btn-danger btn-mini" id="cmdDeleteFile" type="button" value="Delete" />
                    &nbsp;
                    <input class="btn btn-mini closepopup" type="button" value="Cancel" />
                </p>
            </div> <!--your content end-->

        </div> <!--toPopup end-->

        <div class="loader"></div>
        <div id="backgroundPopup"></div    
    </body>
</html>